<template>
    <el-dialog
            :title="title"
            :visible.sync="message"
            :show-close="false"
            @close="resetInfo"
            width="40%">
        <!--        内容-->
        <span>
        <el-form label-width="80px" :model="paramsInfo" :rules="paramsRules" ref="paramsRef">
            <el-form-item label="参数名称" prop="attr_name">
                <el-input v-model="paramsInfo.attr_name"></el-input>
            </el-form-item>
            <el-form-item label="参数属性">
                <el-input v-model="paramsInfo.attr_vals" placeholder="如输入多项属性，请用逗号隔开"></el-input>
            </el-form-item>
        </el-form>
        </span>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="quit">取 消</el-button>
            <el-button type="primary" @click="addParams">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {addParamsData} from "../../../network/goodsParams";

    export default {
        name: "AddParamsDia",
        props:{
            title:{
                type:String,
                default() {
                    return '';
                }
            },
            message:{
                type:Boolean,
                default(){
                    return false
                }
            },
            activeName:{
                type:String,
                default(){
                    return ''
                }
            },
        },
        data(){
            return{
                paramsInfo:{
                    id:this.$store.state.cat_id,
                    attr_name:'',
                    attr_sel:this.activeName,
                    attr_vals:''
                },
                paramsRules:{
                    attr_name:[{required:true,message:'请输入参数名称'}]
                }
            }
        },
        updated() {
            this.paramsInfo.id = this.$store.state.cat_id;
            this.paramsInfo.attr_sel = this.activeName
        },
        methods:{
            quit(){
                if (this.activeName === 'many'){
                    this.$bus.$emit('addParamsDia')
                }else {
                    this.$bus.$emit('addAttr')
                }
            },
            //添加参数或属性
            addParams(){
                addParamsData(this.paramsInfo).then(res => {
                    // console.log(res);
                    if(res.data.meta.status !== 201){
                        this.$message.warning(res.data.meta.msg)
                    }
                    this.$message.success(res.data.meta.msg);
                    if(this.activeName === 'many'){
                        this.$bus.$emit('addParamsDia');
                    }else{
                        this.$bus.$emit('addAttr');
                    }
                    this.$bus.$emit('getParamsData')
                });
            },
            //对话框关闭时重置表单
            resetInfo(){
                this.$refs.paramsRef.resetFields()
            }
        }
    }
</script>

<style scoped>

</style>